<template>
  <view>
    <view class="header">
      <navigator url="/pages/Search-results/Search-results" hover-class="navigator-hover">
      		  <input placeholder="搜索课程/头条/活动" />
      </navigator>
    </view>

	<view class="content" v-for="(v,index) in tableData" :key="v.id" @click="toDetails(v.id)">
	  <view class="informationL">
		<image
		  :src="v.url"
		></image>
	  </view>
	  <view class="informationR" >
		<text class="name">{{v.coursename}}</text>
		<view class="rButton">
		  <view class="rbL">
			<text class="iconfont icon-qian"></text>
			<text>{{v.courseprice}}</text>
		  </view>
		  <view class="rbR">{{v.sales}}人正在学</view>
		</view>
	  </view>
	</view>
	<BottomText></BottomText>
  </view>
</template>

<script setup lang="ts">
import BottomText from '@/components/BottomText/BottomText.vue';
import {ref,computed,onMounted} from 'vue';
import http from '@/utils/http.js'

//渲染
let page=ref(1)
let limit=ref(10)
let total=ref(0)
let tableData=ref([])
let getData=function(){
	http({
	    url:'/course/list',
		method:'get',
		params: {
		    page: page.value,
			limit: limit.value
			}
	}).then((data)=>{
		//console.log(data)
		if (data.code == 0) {
			tableData.value= data.data.list
		    //console.log(tableData)
			
			total.value = data.data.totalCount
			//console.log(total.value)
		    }
	})
}
//跳转传参
let toDetails=function(id){
	uni.navigateTo({
		url:`/pages/courseDetail/courseDetail?id=${id}`
	})
	// console.log(id)
}
//挂载后
onMounted(()=>{
	getData()
})

</script>

<style lang="less" scoped>
@import url('../../static/iconfont-J/iconfont.css');
.header {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 30rpx;
  input {
    color: #979797;
    width: 672rpx;
    height: 80rpx;
    background-color: #faf9f8;
    border-radius: 40px;
  }
}

.content {
  margin: 58rpx 40rpx;
  height: 156rpx;
  display: flex;
  .informationL {
    width: 288rpx;
    height: 156rpx;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    image {
      width: 290rpx;
      height: 158rpx;
    }
  }
  .informationR {
    margin-left: 30rpx;
    margin-top: 34rpx;
    .name {
      font-size: 30rpx;
    }
    .rButton {
      width: 354rpx;
      display: flex;
      justify-content: space-between;
      margin-top: 24rpx;
      .rbL {
        font-size: 20rpx;
        line-height: 28rpx;
        color: #efb235;
        .iconfont {
          width: 28rpx;
          height: 28rpx;
          color: #efb235;
          vertical-align: middle;
          margin-right: 14rpx;
        }
      }
      .rbR {
        font-size: 22rpx;
        line-height: 28rpx;
        color: #919291;
      }
    }
  }
}
</style>
